{#{% extends 'base.html' %}#}
{##}
{#{% block styles %}#}
{#  {{ super() }}#}
{#  <link href="{{ url_for('static', filename='plugins/handsontable/handsontable.full.min.css') }}" rel="stylesheet">#}
{#  <link href="{{ url_for('static', filename='css/case/base.css') }}" rel="stylesheet">#}
{#{% endblock styles %}#}

{#{% block app_content %}#}
<div class="row container-fluid element-data element-case mt-2 ml-0" data-case-id="{{ case.id }}" data-case-type="{{ case.case_type }}" style="display: none">
{#  <input type="text" class="form-control" id="input-case-id" value="{{ case.id }}" disabled style="display: none">#}
{#  <input type="text" class="form-control" id="input-case-type" value="{{ case.case_type }}" disabled style="display: none">#}
  <div class="col-12 container-fluid p-0">
    <div class="input-group input-group-sm">
      <div class="input-group-prepend">
        <label class="input-group-text" for="input-case-name-{{ case.id }}">名称</label>
      </div>
      <input id="input-case-name-{{ case.id }}" type="text" class="form-control" placeholder="这里填写案例名称" value="{{ case.name }}">
    </div>
    <div class="input-group input-group-sm mb-1">
      <div class="input-group-prepend">
        <label class="input-group-text" for="input-case-description-{{ case.id }}">注释</label>
      </div>
      <input id="input-case-description-{{ case.id }}" type="text" class="form-control" placeholder="这里填写案例注释" value="{{ case.description }}">
    </div>
    <div class="div-case-container">
      <div class="pre-scrollable div-case-up " id="div-case-up-{{ case.id }}">
      {% block div_case_up %}
      {% endblock div_case_up %}
      </div>
      <div class="pre-scrollable div-case-bottom" id="div-case-bottom-{{ case.id }}">
        <div class="row container-fluid">
          <ul class="col-5 nav nav-pills mb-1 mt-1" id="pills-after-send-tab-{{ case.id }}" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" id="pills-expectation-tab-{{ case.id }}" data-toggle="pill" href="#pills-expectation-{{ case.id }}" role="tab">期望</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="pills-response-tab-{{ case.id }}" data-toggle="pill" href="#pills-response-{{ case.id }}" role="tab">响应</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="pills-request-tab-{{ case.id }}" data-toggle="pill" href="#pills-request-{{ case.id }}" role="tab">请求</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="pills-preprocessor-script-tab-{{ case.id }}" data-toggle="pill" href="#pills-preprocessor-script-{{ case.id }}" role="tab">预处理脚本</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="pills-postprocessor-script-tab-{{ case.id }}" data-toggle="pill" href="#pills-postprocessor-script-{{ case.id }}" role="tab">后处理脚本</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="pills-log-tab-{{ case.id }}" data-toggle="pill" href="#pills-log-{{ case.id }}" role="tab">日志</a>
            </li>
          </ul>
          <div class="col-7 mt-2">
            <div id="div-spinner-{{ case.id }}" class="spinner-border text-primary" role="status" style="display: none;">
              <span class="sr-only">加载中Loading...</span>
            </div>
            <div id="div-expectation-result-failure-hint-{{ case.id }}" class="badge badge-pill badge-danger text-wrap" style="display: none;">
              期望断言失败，点击期望Tab页查看详细信息...
            </div>
            <div id="div-expectation-not-set-hint-{{ case.id }}" class="badge badge-pill badge-secondary text-wrap" style="display: none;">
              当前案例未设置期望断言...
            </div>
            <div id="div-postprocessor-result-failure-hint-{{ case.id }}" class="badge badge-pill badge-danger text-wrap" style="display: none;">
              后处理脚本断言失败，点击后处理脚本Tab页查看详细信息...
            </div>
            <div id="div-assert-result-success-hint-{{ case.id }}" class="badge badge-pill badge-success text-wrap" style="display: none;">
              期望断言和后处理脚本断言成功，本次执行结果成功...
            </div>
          </div>
        </div>
        <div class="tab-content" id="pills-tabContent-after-send-{{ case.id }}">
          <div class="tab-pane fade show active" id="pills-expectation-{{ case.id }}" role="tabpanel">
            <div class="d-flex">
              <p>期望结果逻辑处理：</p>
              <div class="btn-group btn-group-sm" data-toggle="buttons">
                <label class="btn btn-outline-secondary btn-sm {{ 'active' if case.specific_case.expectation_logic == '与' }}">
                  <input type="radio" name="expectation-logic-{{ case.id }}" id="radio-expectation-logic-and-{{ case.id }}" autocomplete="off" {{ 'checked' if case.specific_case.expectation_logic == '与' }}> 与
                </label>
                <label class="btn btn-outline-secondary btn-sm {{ 'active' if case.specific_case.expectation_logic == '或'}}">
                  <input type="radio" name="expectation-logic-{{ case.id }}" id="radio-expectation-logic-or-{{ case.id }}"  autocomplete="off" {{ 'checked' if case.specific_case.expectation_logic == '或'}}> 或
                </label>
              </div>
              <p class="small">（提示：与-断言结果都是true则为成功；或-只要有一个断言结果是true则为成功）</p>
            </div>
            <div id="table-expectation-{{ case.id }}" class="d-flex justify-content-center">
              <div id="div-table-expectation-spinner-{{ case.id }}" class="spinner-border text-primary m-5" role="status">
                <span class="sr-only">加载中Loading...</span>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="pills-response-{{ case.id }}" role="tabpanel">
            <div class="card">
              <div class="card-body p-0">
                <div class="row container-fluid">
                  <ul class="nav nav-tabs col-8" id="myTab-response-{{ case.id }}" role="tablist">
                    <li class="nav-item">
                      <a class="nav-link active" id="response-body-tab-{{ case.id }}" data-toggle="tab" href="#response-body-{{ case.id }}" role="tab">响应体</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" id="response-header-tab-{{ case.id }}" data-toggle="tab" href="#response-header-{{ case.id }}" role="tab">响应头</a>
                    </li>
                  </ul>
                  <div class="col-4 d-flex justify-content-end">
                    <div class="btn-group btn-group-sm p-2" role="group">
                      <button id="btn-save-response-{{ case.id }}" type="button" class="btn btn-link" data-fileName="" disabled>SaveResponse</button>
                    </div>
                    <div class="btn-group btn-group-sm btn-group-toggle p-2" data-toggle="buttons">
                      <label class="btn btn-outline-secondary">
                        <input type="radio" name="response-code" id="radio-default-response-code-{{ case.id }}" autocomplete="off"> 默认
                      </label>
                      <label class="btn btn-outline-secondary active">
                        <input type="radio" name="response-code" id="radio-beautify-response-code-{{ case.id }}"  autocomplete="off" checked> 美化
                      </label>
                    </div>
                  </div>
                </div>
                <div class="tab-content" id="myTabContent-response-{{ case.id }}">
                  <div class="tab-pane fade show active" id="response-body-{{ case.id }}" role="tabpanel">
                    <div class="card">
                      <div class="card-body p-0">
                        <div class="container-fluid ace-response-body" id="div-ace-response-body-{{ case.id }}"></div>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="response-header-{{ case.id }}" role="tabpanel">
                    <div class="card">
                      <div class="card-body p-0">
                        <div class="container-fluid ace-response-header" id="div-ace-response-header-{{ case.id }}"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="pills-request-{{ case.id }}" role="tabpanel">
            <div class="card">
              <div class="card-body p-0">
                <div class="row container-fluid">
                  <ul class="nav nav-tabs col-8" id="myTab-request-{{ case.id }}" role="tablist">
                    <li class="nav-item">
                      <a class="nav-link active" id="request-body-tab-{{ case.id }}" data-toggle="tab" href="#request-body-{{ case.id }}" role="tab">请求体</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" id="request-header-tab-{{ case.id }}" data-toggle="tab" href="#request-header-{{ case.id }}" role="tab">请求头</a>
                    </li>
                  </ul>
                  <div class="col-4 d-flex justify-content-end">
                    <div class="btn-group btn-group-sm btn-group-toggle p-2" data-toggle="buttons">
                      <label class="btn btn-outline-secondary">
                        <input type="radio" name="request-code" id="radio-default-request-code-{{ case.id }}" autocomplete="off"> 默认
                      </label>
                      <label class="btn btn-outline-secondary active">
                        <input type="radio" name="request-code" id="radio-beautify-request-code-{{ case.id }}"  autocomplete="off" checked> 美化
                      </label>
                    </div>
                  </div>
                </div>
                <div class="tab-content" id="myTabContent-request-{{ case.id }}">
                  <div class="tab-pane fade show active" id="request-body-{{ case.id }}" role="tabpanel">
                    <div class="card">
                      <div class="card-body p-0">
                        <div class="container-fluid ace-request-body" id="div-ace-request-body-{{ case.id }}"></div>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="request-header-{{ case.id }}" role="tabpanel">
                    <div class="card">
                      <div class="card-body p-0">
                        <div class="container-fluid ace-request-header" id="div-ace-request-header-{{ case.id }}"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="pills-preprocessor-script-{{ case.id }}" role="tabpanel">
            <div class="row">
              <div class="col-10">
                <div class="container-fluid ace-preprocessor-script" id="div-ace-preprocessor-script-{{ case.id }}">{{ case.specific_case.preprocessor_script }}</div>
              </div>
              <div class="col-2">
                <div class="card border-light">
                  <div class="card-body text-dark p-0">
                    <h5 class="card-title">代码示例</h5>
                    <p class="card-text">
                      <button type="button" class="btn btn-link pt-0 pb-0" id="button-ace-preprocessor-log-{{ case.id }}">日志打印</button><br>
                      <button type="button" class="btn btn-link pt-0 pb-0" id="button-ace-preprocessor-get-variable-{{ case.id }}">获取变量</button><br>
                      <button type="button" class="btn btn-link pt-0 pb-0" id="button-ace-preprocessor-set-variable-{{ case.id }}">设置变量</button>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="pills-postprocessor-script-{{ case.id }}" role="tabpanel">
            <div class="row">
              <div class="col-7">
                <div class="container-fluid ace-postprocessor-script" id="div-ace-postprocessor-script-{{ case.id }}">{{ case.specific_case.postprocessor_script }}</div>
              </div>
              <div class="col-2">
                <div class="card border-light">
                  <div class="card-body text-dark p-0">
                    <h5 class="card-title">代码示例</h5>
                    <p class="card-text">
                      <button type="button" class="btn btn-link pt-0 pb-0" id="button-ace-postprocessor-log-{{ case.id }}">日志打印</button><br>
                      <button type="button" class="btn btn-link pt-0 pb-0" id="button-ace-postprocessor-get-variable-{{ case.id }}">获取变量</button><br>
                      <button type="button" class="btn btn-link pt-0 pb-0" id="button-ace-postprocessor-set-variable-{{ case.id }}">设置变量</button><br>
                      <button type="button" class="btn btn-link pt-0 pb-0" id="button-ace-postprocessor-get-request-headers-{{ case.id }}">获取请求头</button><br>
                      <button type="button" class="btn btn-link pt-0 pb-0" id="button-ace-postprocessor-get-request-body-{{ case.id }}">获取请求体</button><br>
                      <button type="button" class="btn btn-link pt-0 pb-0" id="button-ace-postprocessor-get-response-headers-{{ case.id }}">获取响应头</button><br>
                      <button type="button" class="btn btn-link pt-0 pb-0" id="button-ace-postprocessor-get-response-body-{{ case.id }}">获取响应体</button><br>
                      <button type="button" class="btn btn-link pt-0 pb-0" id="button-ace-postprocessor-set-assert-{{ case.id }}">设置断言</button><br>
                    </p>
                  </div>
                </div>
              </div>
              <div class="col-3">
                <div class="card border-light postprocessor-result-card" id="div-postprocessor-result-card-{{ case.id }}">
                  <div class="card-body text-dark">
                    <h6 class="card-title">
                      后处理断言结果
                      <span class="badge badge-success" id="badge-postprocessor-result-success-{{ case.id }}" style="display: none">成功</span>
                      <span class="badge badge-danger" id="badge-postprocessor-result-failure-{{ case.id }}" style="display: none">失败</span>
                    </h6>
                    <p class="card-text">错误信息</p>
                    <p class="card-text" id="p-postprocessor-result-card-text-{{ case.id }}"></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="pills-log-{{ case.id }}" role="tabpanel">
            <div class="container-fluid ace-log" id="div-ace-log-{{ case.id }}"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{#{% endblock app_content %}#}

{#{% block scripts %}#}
{#  {{ super() }}#}
{#  <script src="{{url_for('static', filename='plugins/handsontable/handsontable.full.min.js')}}"></script>#}
{#  <script src="{{url_for('static', filename='plugins/handsontable/languages/all.js')}}"></script>#}
{#  <script src="{{url_for('static', filename='plugins/ace/ace.js')}}"></script>#}
{#  <script src="{{url_for('static', filename='plugins/js-beautify/beautify.js')}}"></script>#}
{#  <script src="{{url_for('static', filename='plugins/js-beautify/beautify-css.js')}}"></script>#}
{#  <script src="{{url_for('static', filename='plugins/js-beautify/beautify-html.js')}}"></script>#}
{#  <script src="{{url_for('static', filename='plugins/Inputmask/jquery.inputmask.min.js')}}"></script>#}
{#  <script src="{{url_for('static', filename='plugins/jQuery-Mask-Plugin/jquery.mask.min.js')}}"></script>#}
{#  <script src="{{url_for('static', filename='plugins/download/download.min.js')}}"></script>#}
{#  <script src="{{url_for('static', filename='plugins/split.js/split.min.js')}}"></script>#}
{#  <script src="{{url_for('static', filename='js/case/base.js')}}"></script>#}
{#{% endblock %}#}